<template>
  <div id="">
    <el-menu mode="horizontal"
      :default-active="menuIndex || 'home'">
      <el-menu-item index="home" @click="$router.push({ name: 'home' })">
        <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
        <span slot="title">首页</span>
      </el-menu-item>
      <sub-menu
        v-for="menu in topMenu"
        :key="menu.menuId"
        :menu="menu"
        :dynamicMenuRoutes="dynamicMenuRoutes">
      </sub-menu>
    </el-menu>
  </div>
</template>

<script>
// :default-active="navbarMenuActiveName || 'home'"
  import SubMenu from './main-top-sub-menu'
  import { isURL } from '@/utils/validate'
  import { topMenuActiveName } from '@/utils/index.js'
  export default {
    data () {
      return {
        dynamicMenuRoutes: [],
        menuIndex: '',
        topMenu: {
         'sys': {
            'menuId': 1,
            'parentId': 0,
            'parentName': null,
            'name': '系统管理',
            'url': 'sys/user',
            'perms': null,
            'type': 0,
            'icon': 'system',
            'orderNum': 0,
            'open': null
          },
         'monitor': {
            'menuId': 100,
            'parentId': 0,
            'parentName': null,
            'name': '系统监控',
            'url': 'sys',
            'perms': null,
            'type': 0,
            'icon': 'monitor',
            'orderNum': 0,
            'open': null,
            'list': [
              {
                'menuId': 201,
                'parentId': 200,
                'parentName': null,
                'name': '服务监控',
                'url': 'sys/user',
                'perms': null,
                'type': 1,
                'icon': 'servicemonitor',
                'orderNum': 1,
                'open': null,
                'list': null
              },
              {
                'menuId': 202,
                'parentId': 200,
                'parentName': null,
                'name': '接口文档',
                'url': 'sys/user',
                'perms': null,
                'type': 1,
                'icon': 'document',
                'orderNum': 1,
                'open': null,
                'list': null
              }
            ]
          },
         'mymenu': {
            'menuId': 400,
            'parentId': 0,
            'parentName': null,
            'name': '菜单管理',
            'url': 'mymenu/user-info',
            'perms': null,
            'type': 1,
            'icon': 'menu',
            'orderNum': 3,
            'open': null,
            'list': null
          }
        }
      }
    },
    components: {
      SubMenu
    },
    computed: {
      navbarMenuActiveName: { // 顶部菜单激活名
        get () { return topMenuActiveName(this) }
      },
      sidebarLayoutSkin: {
        get () { return this.$store.state.common.sidebarLayoutSkin }
      },
      sidebarFold: {
        get () { return this.$store.state.common.sidebarFold }
      },
      menuList: {
        get () { return this.$store.state.common.menuList },
        // get () { return [{name: "nan", id: 1204}]},
        set (val) { this.$store.commit('common/updateMenuList', val) }
      },
      menuActiveName: {
        get () { return this.$store.state.common.menuActiveName },
        set (val) { this.$store.commit('common/updateMenuActiveName', val) }
      },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
      mainTabsActiveName: {
        get () { return this.$store.state.common.mainTabsActiveName },
        set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
      }
    },
    watch: {
      $route: 'routeHandle',
      navbarMenuActiveName: 'menuIndexChange'
    },
    created () {
      this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
      this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
      this.routeHandle(this.$route)
      this.menuIndexChange()
    },
    methods: {
      menuIndexChange () {
        let name = this.navbarMenuActiveName
        if (this.topMenu[name] && this.topMenu[name].menuId) {
          console.log('------------------>')
          this.menuIndex = this.topMenu[name].menuId + ''
        } else {
          this.menuIndex = ''
        }
      },
      // 路由操作
      routeHandle (route) {
        // console.log('route', route)
        // let tmp = route.meta.menuId || route.name
        // this.navbarMenuActiveName = tmp + ''
        // console.log('this.navbarMenuActiveName', this.navbarMenuActiveName)
        if (route.meta.isTab) {
          // tab选中, 不存在先添加
          var tab = this.mainTabs.filter(item => item.name === route.name)[0]
          if (!tab) {
            if (route.meta.isDynamic) {
              route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
              if (!route) {
                return console.error('未能找到可用标签页!')
              }
            }
            tab = {
              menuId: route.meta.menuId || route.name,
              name: route.name,
              title: route.meta.title,
              type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
              iframeUrl: route.meta.iframeUrl || ''
            }
            this.mainTabs = this.mainTabs.concat(tab)
          } else {
            console.log('-----------------------------------------')
            this.$router.push({name: route.name})
          }
          this.menuActiveName = tab.menuId + ''
          this.mainTabsActiveName = tab.name
          // console.log('this.menuActiveName', this.menuActiveName)
        }
      }
    }
  }
</script>

<style>
  .el-menu {
    background: rgba(0, 0, 0, 0)
  }
</style>
